<script>
import { createVNode } from 'vue'
export default {
  name: 'XtxHello',
  setup() {
    const handleClick2 = (item) => {
      console.log(item + '~~~')
    }
    return { handleClick2 }
  },
  render() {
    const data = {
      name: '尼古拉斯',
      age: 18,
      arr: ['a', 'b', 'c'],
      isLoading: false
    }
    // 判断
    if (data.isLoading) {
      return <div>loading...</div>
    }

    const handleClick = (item) => {
      console.log(item)
      // 返回（得到）值
      // return undefined
    }
    return (
      <div>
        {/* 输出 */}
        <p>name: {data.name}</p>
        <p>age: {data.age}</p>
        <p>成年了吗: {data.age >= 18 ? '是的' : 'no'}</p>
        <ul>{[<li>a</li>, <li>b</li>, <li>c</li>]}</ul>
        {/* 遍历 */}
        <ul>
          {/* 如何绑定事件并传值，第一种方式 */}
          {data.arr.map((item) => (
            <li key={item} onClick={() => handleClick(item)}>
              {item}
            </li>
          ))}
        </ul>
        <ul>
          {/* 如何绑定事件并传值，第二种方式 */}
          {data.arr.map((item) => (
            <li key={item} onClick={() => this.handleClick2(item)}>
              {item}
            </li>
          ))}
        </ul>
      </div>
    )
  }
}
</script>
